<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>订单管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-spin :spinning="spinning">
      <div class="pageTabsWhole" style="margin-top:24px;">
        <a-tabs
          :active-key="activeKey"
          :tabBarStyle="{margin:0}"
          :tabBarGutter="16"
          :animated="false"
          @change="tabChange"
          class="table_tab"
        >
          <a-tab-pane key tab="全部"></a-tab-pane>
          <a-tab-pane :key="1" tab="进行中"></a-tab-pane>
          <a-tab-pane :key="2" tab="已完成"></a-tab-pane>
          <a-tab-pane :key="4" tab="已结算"></a-tab-pane>
          <!-- <a-tab-pane :key="5" tab="已作废"></a-tab-pane> -->
        </a-tabs>
      </div>
      <div class="pageContentWhole">
        <a-form-model ref="form" :model="form" layout="inline">
          <a-form-model-item label="客户名称" prop="custNameLike">
            <a-input v-model="form.custNameLike" style="width:175px" />
          </a-form-model-item>
          <a-form-model-item label="公司编号/运单号/箱号/封号" prop="codeLike">
            <a-input v-model="form.codeLike" style="width:175px" />
          </a-form-model-item>
          <a-form-model-item label="驳船、海船船名/航次" prop="shipNameLike">
            <a-input v-model="form.shipNameLike" style="width:175px" />
          </a-form-model-item>
          <a-form-model-item label="结算类型" prop="settlementType">
            <a-select v-model="form.settlementType" style="width:90px">
              <a-select-option value>全部</a-select-option>
              <!-- <a-select-option :value="2">月结</a-select-option> -->
              <!-- <a-select-option :value="1">票结</a-select-option> -->
              <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="运输条款" prop="transportTerms">
            <a-select v-model="form.transportTerms" style="width:110px">
              <a-select-option value>全部</a-select-option>
              <a-select-option value="DO-DO">门到门</a-select-option>
              <a-select-option value="DO-CY">门到港</a-select-option>
              <a-select-option value="CY-DO">港到门</a-select-option>
              <a-select-option value="CY-CY">港到港</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="订单类型" prop="orderType">
            <a-select v-model="form.orderType" style="width:135px">
              <a-select-option value>全部</a-select-option>
              <a-select-option value="DOMESTIC_TRADE_EXPORTS">内贸出口订单</a-select-option>
              <a-select-option value="DOMESTIC_TRADE_IMPORTS">内贸进口订单</a-select-option>
              <a-select-option value="FOREIGN_TRADE_EXPORTS">外贸出口订单</a-select-option>
              <a-select-option value="FOREIGN_TRADE_IMPORTS">外贸进口订单</a-select-option>
              <a-select-option value="UNITED_TRANSPORT_EXPORTS">联运出口订单</a-select-option>
              <a-select-option value="UNITED_TRANSPORT_IMPORTS">联运进口订单</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-input-group compact>
              <a-select v-model="form.dateSearchType" style="width:130px">
                <a-select-option :value="1">创建时间</a-select-option>
                <a-select-option :value="2">装货时间</a-select-option>
                <a-select-option :value="3">完成时间</a-select-option>
                <a-select-option :value="4">海船起航日期</a-select-option>
              </a-select>
              <a-range-picker
                v-if="form.dateSearchType === 2"
                :value="createValue"
                @change="onChange"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                style="width:300px"
              >
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
              <a-range-picker v-else @change="onChange" :value="createValue" style="width:300px">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-input-group>
          </a-form-model-item>
          <a-form-model-item label="始发港" prop="startPortLike">
            <a-input v-model="form.startPortLike" class="selectInputWidth" />
          </a-form-model-item>
          <a-form-model-item label="目的港" prop="endPortLike">
            <a-input v-model="form.endPortLike" class="selectInputWidth" />
          </a-form-model-item>
          <a-form-model-item label="所属部门" prop="deptId">
            <a-tree-select
              class="selectInputWidth"
              v-model="form.deptId"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :load-data="onLoadData"
              :tree-data="deptTreeData"
              placeholder="请选择"
              @change="onChangeTree"
            ></a-tree-select>
          </a-form-model-item>
          <a-form-model-item label="所属销售" prop="sellerId">
            <a-select v-model="form.sellerId" class="selectInputWidth">
              <a-select-option v-for="v in sellers" :key="v.uiId">{{v.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="所属操作" prop="handlerId">
            <a-select v-model="form.handlerId" class="selectInputWidth">
              <!-- <a-select-option value>请选择操作员</a-select-option> -->
              <a-select-option
                v-for="(item,index) in handlerList"
                :key="index"
                :value="item.uiId"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="是否待跟踪" prop="isTrack">
            <a-select v-model="form.isTrack" style="width:110px">
              <a-select-option value>全部</a-select-option>
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="0">否</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="放货状态" prop="releaseStatus">
            <a-select v-model="form.releaseStatus" style="width:110px">
              <a-select-option value>全部</a-select-option>
              <a-select-option value="2">可放货</a-select-option>
              <a-select-option value="1">扣货</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="陆运状态" prop="dispatcherStatus">
            <a-select v-model="form.dispatcherStatus" style="width:150px">
              <a-select-option value>全部</a-select-option>
              <a-select-option :value="1">未派单到陆运</a-select-option>
              <a-select-option :value="7">陆运已退单</a-select-option>
              <a-select-option :value="2">已派单到陆运</a-select-option>
              <a-select-option :value="3">陆运中</a-select-option>
              <a-select-option :value="4">陆运已完成</a-select-option>
              <a-select-option :value="5">陆运已作废</a-select-option>
              <a-select-option :value="6">陆运异常结束</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="收货人" prop="consigneeLike">
            <a-input v-model="form.consigneeLike" class="selectInputWidth" />
          </a-form-model-item>
          <a-form-model-item label="费用是否已录完" prop="isCostRecorded">
            <a-select v-model="form.isCostRecorded" style="width:150px">
              <a-select-option value>全部</a-select-option>
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="0">否</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="持箱人" prop="holderId">
            <a-select v-model="form.holderId" style="width:200px">
              <a-select-option value>全部</a-select-option>
              <a-select-option
                v-for="(item,index) in holderList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="收货地址" prop="consigneeAddressLike">
            <a-input v-model="form.consigneeAddressLike" class="selectInputWidth" />
          </a-form-model-item>
          <a-form-model-item label="发货地址" prop="consignorAddressLike">
            <a-input v-model="form.consignorAddressLike" class="selectInputWidth" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="check">查询</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="checkAll">全选/反选</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="orderToTrack">批量跟踪</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="orderToLand">派单到陆运</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="orderAddFee">批量填写费用</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <!-- 订单管理列表 -->
      <!-- <a-checkbox-group v-if="listData.length > 0" @change="checkboxChange"> -->
      <a-row class="orderItem ordertem_de order_co" v-if="listData.length > 0">
        <a-col :span="24">
          <div v-for="(v, index) in listData" :key="index" class="orderList">
            <a-card size="small">
              <template slot="title">
                <a-row>
                  <a-col :span="1" class="order_check">
                    <a-checkbox
                      :disabled="v.status=== 1 ? false: true"
                      :value="v.id"
                      :checked="v.status === 1 ? v.checked : false"
                      @change="checkboxChange"
                    />
                  </a-col>
                  <a-col :span="23">
                    <a-descriptions :column="5" class="titleCard titleCard1">
                      <a-descriptions-item label="公司编号">{{v.shipOrderCode}}</a-descriptions-item>
                      <a-descriptions-item label="运单号">{{v.seagoingShipOrderCode || '--'}}</a-descriptions-item>
                      <!-- <a-descriptions-item label="驳船船名航次">{{v.shipName}}/{{v.voyageNumber}}</a-descriptions-item> -->
                      <a-descriptions-item label="驳船船名航次">
                        <a-tooltip placement="top">
                          <template slot="title">
                            <span>{{v.shipName || '--'}} / {{v.voyageNumber || '--'}}</span>
                          </template>
                          {{v.shipName || '--'}} / {{v.voyageNumber || '--'}}
                        </a-tooltip>
                      </a-descriptions-item>
                      <a-descriptions-item label="创建日期">{{v.createTime}}</a-descriptions-item>
                      <a-descriptions-item label="所属销售">{{v.seller}}</a-descriptions-item>
                    </a-descriptions>
                  </a-col>
                </a-row>
              </template>
              <a-descriptions :column="4" size="small" class="order_detail">
                <a-descriptions-item label="客户名称">
                  <a-tooltip placement="top" style="cursor:pointer">
                    <template slot="title">
                      <span>{{v.custName}}</span>
                    </template>
                    {{v.custName}}
                  </a-tooltip>
                </a-descriptions-item>
                <template>
                  <a-descriptions-item v-if="v.transportTerms=== 'DO-DO'" label="运输条款">门到门</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'DO-CY'" label="运输条款">门到港</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'CY-DO'" label="运输条款">港到门</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'CY-CY'" label="运输条款">港到港</a-descriptions-item>
                </template>
                <!-- <a-descriptions-item label="箱型箱量">{{v.containerType}}*{{v.containerNum}}</a-descriptions-item> -->
                <a-descriptions-item label="箱型箱量">{{v.containerType}}*1</a-descriptions-item>
                <a-descriptions-item
                  label="起运/目的港"
                >{{v.startPortName||'--'}} / {{v.endPortName||'--'}}</a-descriptions-item>
                <template>
                  <a-descriptions-item
                    v-if="v.orderType === 'DOMESTIC_TRADE_EXPORTS'"
                    label="订单类型"
                  >内贸出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'DOMESTIC_TRADE_IMPORTS'"
                    label="订单类型"
                  >内贸进口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'FOREIGN_TRADE_EXPORTS'"
                    label="订单类型"
                  >外贸出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'FOREIGN_TRADE_IMPORTS'"
                    label="订单类型"
                  >外贸进口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'UNITED_TRANSPORT_EXPORTS'"
                    label="订单类型"
                  >联运出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'UNITED_TRANSPORT_IMPORTS'"
                    label="订单类型"
                  >联运进口订单</a-descriptions-item>
                </template>
                <a-descriptions-item label="箱号">{{v.containerNo || '--'}}</a-descriptions-item>
                <a-descriptions-item label="货名">{{v.goodsName}}</a-descriptions-item>
                <a-descriptions-item label="装货时间">{{v.loadingTime}}</a-descriptions-item>
              </a-descriptions>
            </a-card>
            <a-card size="small" style="border-top:none" class="order_czuo ddzx_czuo">
              <template slot="title">
                <template>
                  <a-badge v-if="v.status === 1" color="#7CB305" text="进行中" />
                  <a-badge v-else-if="v.status === 2" color="#474747" text="已完成" />
                  <a-badge v-else-if="v.status === 3" color="#474747" text="已完成-异常" />
                  <a-badge v-else-if="v.status === 4" color="#FAAD14" text="已结算" />
                  <a-badge v-else-if="v.status === 5" color="#CF1322" text="已作废" />
                </template>
                <template>
                  <span v-if="v.isTrack === 1" class="ddzx_zhuant">
                    <img src="@@/images/order_zt9.png" alt />
                    <span>待跟踪</span>
                  </span>
                  <span v-if="v.releaseStatus === 1" class="ddzx_zhuant">
                    <img src="@@/images/order_zt10.png" alt />
                    <span>扣货</span>
                  </span>
                  <span v-if="v.releaseStatus === 2" class="ddzx_zhuant">
                    <img src="@@/images/order_zt11.png" alt />
                    <span>可放货</span>
                  </span>
                  <!-- <span
                    v-if="v.isTruckOrderComplete === 0 && v.isDispatch === 1"
                    class="ddzx_zhuant"
                  >
                    <img src="@@/images/order_zt2.png" alt />
                    <span style="line-height:28px;">已派单到陆运</span>
                  </span>-->
                  <span v-if="v.orderTruckStatus === 1" class="ddzx_zhuant">
                    <img src="@@/images/order_zt1.png" alt />
                    <span style="line-height:28px;">未派单到陆运</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 2" class="ddzx_zhuant">
                    <img src="@@/images/order_zt2.png" alt />
                    <span style="line-height:28px;">已派单到陆运</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 3" class="ddzx_zhuant">
                    <img src="@@/images/order_zt16.png" alt />
                    <span style="line-height:28px;">陆运中</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 4" class="ddzx_zhuant">
                    <img src="@@/images/order_zt17.png" alt />
                    <span style="line-height:28px;">陆运已完成</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 5" class="ddzx_zhuant">
                    <img src="@@/images/order_zt15.png" alt />
                    <span style="line-height:28px;">陆运已作废</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 6" class="ddzx_zhuant">
                    <img src="@@/images/order_zt14.png" alt />
                    <span style="line-height:28px;">陆运异常结束</span>
                  </span>
                  <span v-if="v.orderTruckStatus === 7" class="ddzx_zhuant">
                    <img src="@@/images/order_zt5.png" alt />
                    <span style="line-height:28px;">陆运已退单</span>
                  </span>
                  <span v-if="v.isCostRecorded === 1" class="ddzx_zhuant">
                    <img src="@@/images/feid1.png" alt />
                    <span style="line-height:28px;">费用已录完</span>
                    <span
                      v-if="v.costRecordedTime"
                      style="line-height:28px;"
                    >（{{v.costRecordedTime}}）</span>
                  </span>
                </template>
              </template>
              <a-button
                v-if="v.status === 1"
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="endOrder(v)"
              >结束订单</a-button>
              <a-button
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="orderDetail(v)"
              >详情</a-button>
            </a-card>
          </div>
          <p class="orderPagination">
            <a-pagination
              show-size-changer
              :current="pagination.current"
              :total="pagination.total"
              :page-size-options="['10', '30', '50', '100', '500']"
              :showTotal="pagination.showTotal"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </p>
        </a-col>
      </a-row>
      <!-- </a-checkbox-group> -->
      <a-empty v-else />
    </a-spin>
    <!-- 结束订单 -->
    <a-modal
      title="结束订单"
      width="650px"
      centered
      :visible="endOrderVisible"
      :confirm-loading="confirmLoading"
      @ok="endOrderOk"
      @cancel="endOrderCancel"
    >
      <a-form-model
        ref="endForm"
        :rules="rules"
        :model="endForm"
        :label-col="{span:4}"
        :wrapper-col="{span:18}"
      >
        <a-form-model-item label="结束类型" prop="status">
          <a-select v-model="endForm.status">
            <a-select-option value>请选择</a-select-option>
            <a-select-option :value="5">作废</a-select-option>
            <a-select-option :value="3">已完成-异常</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="原因" prop="reason">
          <a-input
            v-model="endForm.reason"
            type="textarea"
            :max-length="200"
            :auto-size="{ minRows: 5, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 派单到陆运 -->
    <a-modal
      title="派单到陆运系统"
      width="600px"
      centered
      :visible="landVisible"
      :confirm-loading="confirmLoading2"
      @ok="landOk"
      @cancel="landCancel"
    >
      <div style="text-align:center;margin-bottom:20px">
        正在对选中的
        <span style="color:red;font-size:22px">{{checkedNumber}}</span> 个订单进行派单到陆运系统
      </div>
      <a-form-model
        ref="landForm"
        :rules="rules"
        :model="landForm"
        :label-col="{span:6}"
        :wrapper-col="{span:15}"
      >
        <a-form-model-item label="是否加急" prop="isUrgent">
          <a-select v-model="landForm.isUrgent">
            <a-select-option value>请选择</a-select-option>
            <a-select-option :value="0">普通</a-select-option>
            <a-select-option :value="1">加急</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="要求送达日期" prop="requiredArriveTime">
          <a-date-picker
            :value="landForm.requiredArriveTime ? momentDate(landForm.requiredArriveTime) : undefined"
            @change="landTimeChange"
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            style="width:100%"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-date-picker>
        </a-form-model-item>-->
        <a-form-model-item label="备注" prop="handlerRemark">
          <a-input
            v-model="landForm.handlerRemark"
            type="textarea"
            :max-length="200"
            :auto-size="{ minRows: 6, maxRows: 6 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 批量跟踪 -->
    <a-modal
      title="订单批量跟踪"
      width="600px"
      centered
      :visible="trackVisible"
      @cancel="trackCancel"
      :footer="null"
    >
      <div style="text-align:center;margin-bottom:20px">
        正在对选中的
        <span style="color:red;font-size:22px">{{checkedNumber}}</span> 个订单进行跟踪
      </div>
      <a-form-model
        ref="trackForm"
        :rules="trackRules"
        :model="trackForm"
        :label-col="{span:5}"
        :wrapper-col="{span:16}"
      >
        <a-form-model-item label="货物状态" prop="title">
          <a-select v-model="trackForm.title">
            <a-select-option value>请选择</a-select-option>
            <a-select-option value="到目的港">到目的港</a-select-option>
            <a-select-option value="到始发港">到始发港</a-select-option>
            <a-select-option value="已完成">已完成</a-select-option>
            <a-select-option value="驳船动态">驳船动态</a-select-option>
            <a-select-option value="海船动态">海船动态</a-select-option>
            <a-select-option value="其它">其它</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          v-if="trackForm.title === '驳船动态' || trackForm.title === '海船动态'"
          label="船名/航次"
          prop="content"
        >
          <a-input v-model="trackForm.content" style="width:100%" placeholder="以 / 区分船名、航次" />
        </a-form-model-item>
        <a-form-model-item v-if="trackForm.title === '海船动态'" label="海船起航日期" prop="departureDate">
          <a-date-picker
            :value="timeValue"
            @change="shipTimeChange"
            format="YYYY-MM-DD"
            style="width:100%"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-input
            v-model="trackForm.remark"
            type="textarea"
            :auto-size="{ minRows: 3, maxRows: 3 }"
            :max-length="200"
          />
        </a-form-model-item>
        <a-form-model-item v-if="trackForm.title === '已完成'" label="图片">
          <!-- <a-form-model-item label="图片"> -->
          <upload
            :uploadName="'completePics'"
            :fatherList="[]"
            :length="9"
            @uploadFile="completePics"
          ></upload>
        </a-form-model-item>
      </a-form-model>
      <div style="margin-left:180px">
        <a-button ghost type="primary" :loading="btnStatus" @click="noNewInfo">无更新信息</a-button>
        <a-button type="primary" :loading="btnStatus2" @click="submitNewInfo">确认上报</a-button>
      </div>
    </a-modal>
    <!-- 批量添加费用 -->
    <a-modal
      title="批量添加费用"
      :width="600"
      centered
      :visible="addFeeVisible"
      :confirm-loading="confirmLoading3"
      @ok="addFeeOk"
      @cancel="addFeeCancel"
    >
      <a-form-model
        ref="addFeeForm"
        :rules="rules"
        :model="addFeeForm"
        :label-col="{span:7}"
        :wrapper-col="{span:17}"
      >
        <a-form-model-item label prop="feeType">
          <a-radio-group
            v-model="addFeeForm.feeType"
            button-style="solid"
            size="large"
            @change="radioChange"
          >
            <a-radio-button :value="1">添加应收</a-radio-button>
            <a-radio-button :value="2">添加应付</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <!-- 选择费用类型 -->
        <a-form-model-item label="选择费用类型" prop="feetypeId">
          <a-select
            style="width:100%"
            show-search
            :show-arrow="false"
            :filter-option="false"
            :default-active-first-option="false"
            :not-found-content="null"
            v-model="addFeeForm.feetypeId"
            @search="feeListChange"
            @change="feeTypeChange"
            @blur="restFeeList"
          >
            <a-select-option value>请选择</a-select-option>
            <a-select-option v-for="(v,k) in feeList" :key="k" :value="v.id">{{v.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 选择结算对象 -->
        <a-form-model-item label="选择结算对象" prop="custId">
          <a-select
            style="width:100%"
            show-search
            :show-arrow="false"
            :filter-option="false"
            :default-active-first-option="false"
            not-found-content="请选择"
            v-model="addFeeForm.custId"
            @search="onSearch"
            @blur="restCustList"
          >
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(record,index) in custList"
              :key="index"
              :value="record.id"
            >{{ record.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 应收金额 -->
        <a-row>
          <a-col :span="18">
            <a-form-model-item
              :label="addFeeForm.feeType === 1 ? '应收金额' : '应付金额'"
              prop="amount"
              :wrapperCol="{span:15}"
              :labelCol="{span:9}"
            >
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="addFeeForm.amount"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="currencyType" :wrapperCol="{span:24}">
              <a-select v-model="addFeeForm.currencyType" style="width:100%">
                <a-select-option v-for="v in moneyTypeArray" :key="v">{{v}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 备注 -->
        <a-form-model-item label="备注" prop="remark">
          <a-input
            v-model="addFeeForm.remark"
            type="textarea"
            :max-length="200"
            :auto-size="{ minRows: 3, maxRows: 3 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {mixin} from '@/common/common'
import { querySellerDown, queryDeptDown, queryFeeTypeList, queryCustNameList } from '@/api'
import { queryShipOrderList, finishShipOrder, dispatchShipOrder, addShipOrderTrack, ignoreShipOrderTrack, batchAddBillCost } from '@/api/orderCenter'
import { queryHolderNameList } from '@/api/boxManagementCenter'
import _ from 'lodash/debounce'
import moment from 'moment'
import upload from '@/components/UpLoad'
const formMessage = `必填项不能为空`
const deptData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL'
}
const sellerData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL',
  status: 1
}
export default {
  mixins: [mixin],
  components: {
    upload
  },
  data () {
    this.feeListChange = _(this.feeListChange, 800)
    this.onSearch = _(this.onSearch, 800)
    return {
      createValue: [],
      activeKey: '',
      form: {
        isCostRecorded: '',
        consigneeLike: '',
        deptId: '', // 所属部门id
        sellerId: '', // 销售id
        handlerId: '', // 操作员id
        statusList: [], // 状态：1待审核，2进行中，3已完成，4审核不通过
        custNameLike: '', // 客户名称
        codeLike: '', // 公司编号/运单号/箱号/封号
        shipNameLike: '', // 驳船、海船船名/航次
        orderType: '', // 订单类型
        transportTerms: '', // 运输条款 DO-CY 门到港 以此类推
        settlementType: '', // 结算方式：1票结，2月结
        startPortLike: '', // 起运港
        endPortLike: '', // 目的港
        dateSearchType: 1, // 1、创建时间 2、装货时间 3.完成时间
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        isTrack: '', // 是否待跟踪
        dispatcherStatus: '', // 陆运状态
        releaseStatus: '', // 放货状态：0初始化，1扣货，2可放货
        holderId: '',
        consigneeAddressLike: '',
        consignorAddressLike: ''
      },
      spinning: false,
      checkAllorNot: false,
      checkedNumber: 0,
      checkedIdArray: [],
      listData: [],
      pageNum: 1,
      pageSize: 10,
      pagination: {},
      orderInfoId: '',
      rules: {
        status: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        reason: [{ required: true, message: formMessage, trigger: ['blur'] }],
        isUrgent: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        handlerRemark: [
          { required: true, message: formMessage, trigger: ['blur'] }
        ],
        amount: [
          { required: true, message: formMessage, trigger: ['blur'] }
        ],
        custId: [
          { required: true, message: formMessage, trigger: ['blur'] }
        ],
        feetypeId: [
          { required: true, message: formMessage, trigger: ['blur'] }
        ]
      },
      // 结束订单
      endOrderVisible: false,
      endForm: {
        orderShipId: '',
        reason: '',
        status: ''
      },
      // 派单到陆运
      landVisible: false,
      landForm: {
        isUrgent: '',
        requiredArriveTime: undefined,
        handlerRemark: ''
      },
      // 批量跟踪
      trackVisible: false,
      trackForm: {
        title: '',
        content: '',
        remark: '',
        departureDate: '',
        completePics: '' // 完成图片 已完成
      },
      trackRules: {
        title: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        content: [{ required: true, message: formMessage, trigger: 'blur' }],
        remark: [{ required: true, message: formMessage, trigger: 'blur' }],
        departureDate: [{ required: true, message: formMessage, trigger: 'change' }]
      },
      deptTreeData: [],
      sellers: [],
      handlerList: [],
      btnControl: {},
      confirmLoading: false,
      confirmLoading2: false,
      btnStatus: false,
      btnStatus2: false,
      addFeeVisible: false,
      confirmLoading3: false,
      addFeeForm: {
        feeType: 1,
        remark: '',
        currencyType: 'CNY',
        amount: '',
        custId: '',
        feetypeId: ''
      },
      moneyTypeArray: [],
      feeList: [],
      custList: [],
      holderList: [],
      timeValue: ''
    }
  },
  methods: {
    completePics (e) {
      this.trackForm.completePics = e
    },
    shipTimeChange (date, dateString) {
      this.timeValue = date
      this.trackForm.departureDate = dateString
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => {})
    },
    radioChange (e) {
      this.addFeeForm = {
        feeType: e.target.value,
        remark: '',
        currencyType: 'CNY',
        amount: '',
        custId: '',
        feetypeId: ''
      }
      this.$refs.addFeeForm.clearValidate()
      this.restCustList()
      this.restFeeList()
    },
    restCustList () {
      let param = {
        status: 1,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER'
      }
      if (this.addFeeForm.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
    },
    onSearch (searchText) {
      let param = {
        status: 1,
        nameLike: searchText,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER'
      }
      if (this.addFeeForm.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
    },
    custListRequest (e) {
      queryCustNameList(e)
        .then(res => {
          this.custList = res.data
        })
        .catch(rs => {})
    },
    restFeeList () {
      this.feeTypeRequest({
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: this.addFeeForm.feeType
      })
    },
    feeTypeChange (value) {
      let targetKey
      this.addFeeForm.currencyType = ''
      this.feeList.forEach((v, k) => {
        if (v.id === value) {
          targetKey = k
        }
      })
      this.moneyTypeArray = this.feeList[targetKey].currencyType.split(',')
      this.addFeeForm.currencyType = this.moneyTypeArray[0]
      // // console.log(value)
      // // console.log(this.moneyTypeArray)

      // let feeName = ''
      // this.feeList.forEach(v => {
      //   if (value === v.id) {
      //     feeName = v.name
      //   }
      // })
      // if (feeName === '应收客户' || feeName === '应付客户') {
      //   // this.feeShow = false
      //   this.$refs.addFeeForm.clearValidate('custId')
      //   this.addFeeForm.custId = this.shipOrderInfo.custId
      // } else {
      //   // this.feeShow = true
      //   this.addFeeForm.custId = ''
      // }
    },
    feeTypeRequest (e, isNeed) {
      queryFeeTypeList(e)
        .then(res => {
          // console.log(e)
          if (e.feeType === 1) {
            this.feeList = res.data.filter(v => (v.name !== '应收客户'))
          } else {
            this.feeList = res.data.filter(v => (v.name !== '应付客户'))
          }
        })
        .catch(rs => {})
    },
    feeListChange (e) {
      this.feeTypeRequest({
        nameLike: e,
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: this.addFeeForm.feeType
      })
    },
    batchAddBillCostRequest (e) {
      batchAddBillCost(e).then(res => {
        this.$message.success('添加成功！')
        setTimeout(() => {
          this.confirmLoading3 = false
          this.addFeeCancel()
        }, 300)
      }).catch(rs => {

      })
    },
    orderAddFee () {
      if (!this.btnControl.batchAddCost) {
        this.$message.error('您无此权限！')
        return false
      }
      let _s = this
      _s.checkedNumber = 0
      _s.checkedIdArray = []
      _s.listData.forEach(v => {
        if (v.checked === true && v.status === 1) {
          _s.checkedNumber++
          _s.checkedIdArray.push(v.id)
        }
      })
      if (_s.checkedNumber === 0) {
        _s.$message.error('请先选中一个订单后再进行操作！')
        return false
      }
      // console.log(_s.checkedIdArray)
      this.feeTypeRequest({
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: _s.addFeeForm.feeType
      })
      let param = {
        status: 1,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER'
      }
      if (_s.addFeeForm.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
      _s.addFeeVisible = true
    },
    addFeeOk () {
      let _t = this
      _t.$refs.addFeeForm.validate(valid => {
        if (valid) {
          _t.confirmLoading3 = true
          _t.batchAddBillCostRequest({
            ..._t.addFeeForm,
            businessIdList: _t.checkedIdArray
          })
        }
      })
    },
    addFeeCancel () {
      this.addFeeVisible = false
      this.addFeeForm = {
        feeType: 1,
        remark: '',
        currencyType: 'CNY',
        amount: '',
        custId: '',
        feetypeId: ''
      }
    },
    momentDate (date, format) {
      return moment(date)
    },
    handlerListRequest (e) {
      querySellerDown(e)
        .then(res => {
          // // console.log(res)
          this.handlerList = res.data
          this.handlerList = res.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
          let originObj = this.$route.meta.s
          this.listAssign(this.form, originObj)
          // // console.log(originObj)
          if (originObj) {
            this.pageSize = originObj.pageSize
            this.pageNum = originObj.pageNum
            this.form.startDate = originObj.startDate
            this.form.endDate = originObj.endDate
            this.activeKey = originObj.activeKey
            if (originObj.startDate) {
              this.createValue = [moment(originObj.startDate), moment(originObj.endDate)]
            } else {
              this.createValue = []
            }
          } else {
            this.form.handlerId = this.handlerList[0].uiId
          }

          this.orderListRequest({
            ...this.form,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          })
        })
        .catch(rs => {})
    },
    orderListRequest (e) {
      this.spinning = true
      queryShipOrderList(e)
        .then(res => {
          this.$route.meta.s = e
          this.$route.meta.s.activeKey = this.activeKey
          // // console.log(res.data)
          let list = res.data.list
          list.forEach(element => {
            element.checked = false
          })
          this.listData = list
          this.pagination = this.getPagination(res.data)
          // let { pageNum, pageSize, total, pages } = res.data
          // this.pagination = { pageNum, pageSize, total, pages }
          // // console.log(this.pagination)
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
        .catch(rs => {})
    },
    endOrderRequest (e) {
      this.confirmLoading = true
      finishShipOrder(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功！')
            this.$refs.endForm.resetFields()
            this.orderListRequest({
              ...this.form,
              pageNum: this.pageNum,
              pageSize: this.pageSize
            })
            setTimeout(() => {
              this.confirmLoading = false
              this.endOrderVisible = false
            }, 500)
          }
        })
        .catch(rs => {
          this.confirmLoading = false
        })
    },
    orderToLandRequest (e) {
      this.confirmLoading2 = true
      dispatchShipOrder(e)
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            this.$message.success('派单成功！')
            this.handleSubmit()
            setTimeout(() => {
              this.confirmLoading2 = false
              this.landCancel()
            }, 500)
          }
        })
        .catch(rs => {
          this.confirmLoading2 = false
        })
    },
    addShipTrackRequest (e) {
      this.btnStatus2 = true
      addShipOrderTrack(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('上报成功！')
            this.trackForm = {
              title: '',
              content: '',
              remark: '',
              departureDate: '',
              completePics: ''
            }
            this.handleSubmit()

            setTimeout(() => {
              // this.$refs.trackForm.resetFields()
              this.trackVisible = false
              this.btnStatus2 = false
            }, 500)
          }
        })
        .catch(rs => {
          this.btnStatus2 = false
        })
    },
    ignoreShipTrackRequest (e) {
      this.btnStatus = true
      ignoreShipOrderTrack(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('上报成功！')
            this.handleSubmit()
            setTimeout(() => {
              this.$refs.trackForm.resetFields()
              this.trackVisible = false
              this.btnStatus = false
            }, 500)
          }
        })
        .catch(rs => {
          this.btnStatus = false
        })
    },
    tabChange (key) {
      this.activeKey = key
      this.pageNum = 1
      // this.pageSize = 10
      this.createValue = []
      this.form.startDate = ''
      this.form.endtDate = ''
      this.$refs.form.resetFields()
      if (!key) {
        this.form.statusList = []
      } else {
        if (key === 2) {
          this.form.statusList = [2, 3]
        } else {
          this.form.statusList = [key]
        }
      }
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    onShowSizeChange (current, size) {
      this.pageNum = current
      this.pageSize = size
      this.handleSubmit()
    },
    paginationOnChange (pageNum) {
      this.pageNum = pageNum
      this.handleSubmit()
    },
    onChange (date, dateString) {
      this.createValue = date
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      // this.pageSize = 10
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleSubmit () {
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    checkboxChange (e) {
      let itemId = e.target.value
      let list = this.listData
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === itemId) {
          // // console.log(list[i])
          list[i].checked = !list[i].checked
          break
        }
      }
    },
    checkAll () {
      this.checkAllorNot = !this.checkAllorNot
      this.listData.forEach(v => {
        v.checked = this.checkAllorNot
      })
    },
    endOrder (e) {
      if (!this.btnControl.end) {
        this.$message.error('您无此权限！')
        return false
      }
      // // console.log(e)
      let _s = this
      _s.endOrderVisible = true
      _s.endForm.orderShipId = e.id
    },
    endOrderOk () {
      let _s = this
      _s.$refs['endForm'].validate(valid => {
        if (valid) {
          _s.endOrderRequest({
            ..._s.endForm
          })
        }
      })
    },
    endOrderCancel () {
      this.$refs.endForm.resetFields()
      this.endOrderVisible = false
    },
    orderToLand () {
      if (!this.btnControl.dispatch) {
        this.$message.error('您无此权限！')
        return false
      }
      let _s = this
      _s.checkedNumber = 0
      _s.checkedIdArray = []
      _s.checkedTimeArray = []
      _s.listData.forEach(v => {
        if (v.checked === true && v.status === 1) {
          _s.checkedNumber++
          _s.checkedIdArray.push(v.id)
          _s.checkedTimeArray.push(v.loadingTime)
        }
      })
      if (_s.checkedNumber === 0) {
        _s.$message.error('请先选中一个订单后再进行操作！')
        return false
      }
      if (_s.checkedNumber === 1) {
        _s.landForm.requiredArriveTime = _s.checkedTimeArray[0]
      }
      _s.landVisible = true
    },
    landTimeChange (date, dateString) {
      this.landForm.requiredArriveTime = dateString
    },
    landOk () {
      let _s = this
      // // console.log(_s.checkedIdArray)
      _s.$refs['landForm'].validate(valid => {
        if (valid) {
          _s.orderToLandRequest({
            ..._s.landForm,
            orderShipIdList: _s.checkedIdArray
          })
        }
      })
    },
    landCancel () {
      this.$refs.landForm.resetFields()
      this.landVisible = false
    },
    orderDetail (e) {
      // if (!this.btnControl.edit) {
      //   this.$message.error('您无此权限！')
      //   return false
      // }
      this.$router.push({ path: `/orderCenter/order/detail/${e.id}` })
    },
    orderToTrack () {
      if (!this.btnControl.batchTracking) {
        this.$message.error('您无此权限！')
        return false
      }
      let _s = this
      _s.checkedNumber = 0
      _s.checkedIdArray = []
      _s.listData.forEach(v => {
        if (v.checked === true && v.status === 1) {
          _s.checkedNumber++
          _s.checkedIdArray.push(v.id)
        }
      })
      if (_s.checkedNumber === 0) {
        _s.$message.error('请先选中一个订单后再进行操作！')
        return false
      }
      _s.trackVisible = true
    },
    noNewInfo () {
      this.ignoreShipTrackRequest({
        idList: this.checkedIdArray
      })
    },
    submitNewInfo () {
      let _t = this
      _t.$refs.trackForm.validate(valid => {
        if (valid) {
          _t.addShipTrackRequest({
            ..._t.trackForm,
            orderShipIdList: _t.checkedIdArray
          })
        }
      })
    },
    trackCancel () {
      this.$refs.trackForm.resetFields()
      this.trackVisible = false
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          rsp => {
            let childrenData = []
            rsp.data.forEach(value => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      queryDeptDown(e).then(rsp => {
        let initData = []
        rsp.data.forEach((value, index) => {
          initData.push({
            title: value.name,
            key: value.deptId,
            value: value.deptId
          })
        })
        // this.form.deptId = rsp.data[0].deptId
        this.deptTreeData = initData
      })
    },
    onChangeTree (value) {
      this.initSellerDown(value)
    },
    initSellerDown (deptId) {
      querySellerDown({ ...sellerData, deptId }).then(rsp => {
        this.sellers = rsp.data.map((v, i) => {
          if (!v.uiId) {
            v.name = '请选择'
            v.uiId = ''
          }
          return v
        })
        // this.form.sellerId = rsp.data[0].uiId
      })
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
    })
    this.pagination = this.getPagination()
    // 所属部门
    this.initDept(deptData)
    // 所属销售
    this.initSellerDown()
    this.handlerListRequest({
      type: 1,
      dataRole: 'CONTAINER_OPR',
      status: 1
    })
    this.holderListRequest({})
  },
  beforeRouteEnter (to, from, next) {
    if (from.name !== 'orderManageDetail' || to.query.f !== '1') {
      to.meta.s = null
    }
    next()
  }
}
</script>

<style scoped>
.top {
  width: auto;
  background: #ffffff;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
  padding: 0;
  color: #333;
  margin: 0;
  width: 100%;
  border-bottom: 1px #e0e0e0 solid;
  position: relative;
}
.top_fh {
  position: absolute;
  left: 3%;
  height: 15px;
  margin-top: 15px;
}

.logo {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.logo img {
  width: 95px;
  margin-top: 36px;
  border-radius: 48px;
  -moz-border-radius: 48px;
  -ms-border-radius: 48px;
  -o-border-radius: 48px;
  -webkit-border-radius: 48px;
  box-shadow: 0px 3px 25px 0px rgba(38, 38, 38, 0.15);
}
.logo h1 {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding-top: 15px;
  padding-bottom: 30px;
}

.c_information {
  width: 94%;
  margin: 0 3% 0 3%;
  overflow: hidden;
  padding-bottom: 15px;
}
.c_information h1 {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  padding: 15px 0;
}
.c_information h1 img {
  width: 20px;
  float: left;
  margin-right: 6px;
}
.c_information ul {
  clear: both;
  width: 100%;
}
.c_information ul li {
  width: 50%;
  float: left;
  color: #333;
  font-size: 14px;
}
.c_information ul li p {
  width: 99.9%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c_information ul li p span {
  color: #999;
}

.c_address {
  width: 97%;
  margin-left: 3%;
  margin-bottom: 10px;
}
.c_address table {
  border-collapse: collapse;
  width: 100%;
  background: url(../../../static/images/form@2x.png) no-repeat 10px center;
  background-size: 12px 16px;
}
.c_address table tr td {
  padding: 12px 0;
}
.c_address table tr .fh_sh {
  width: 46px;
  padding-right: 13px;
  text-align: center;
  background: url(../../../static/images/for1@2x.png) no-repeat left;
  background-size: 32px 37.5px;
  color: #fff;
  line-height: 21px;
}
.c_address table tr .fh_sh1 {
  background: url(../../../static/images/to1@2x.png) no-repeat left;
  background-size: 32px 37.5px;
}
.c_address table tr .add h1 {
  font-size: 14px;
  color: #333;
  line-height: 20px;
  height: 20px;
  margin-bottom: 8px;
  margin-right: 3%;
}
.c_address table tr .add h1 span {
  display: inline-block;
  width: 30%;
  padding-right: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
}

.c_address table tr .add h2 {
  font-size: 14px;
  color: #999;
  line-height: 20px;
  margin-right: 3%;
}
.c_address table tr .add h2 span {
  display: inline-block;
  width: 30%;
  padding-right: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333;
  font-weight: bold;
  line-height: 20px;
  /* float: left; */
}

.c_code {
  text-align: center;
  width: 94%;
  margin: 0 3%;
  border-bottom: 1px dashed #ededed;
  border-top: 1px dashed #ededed;
  padding: 22px 0 20px 0;
}
.c_code img {
  width: 56%;
  margin-bottom: 10px;
}
.c_code h1 {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.c_code p {
  font-size: 12px;
  color: #999;
  line-height: 20px;
}

.c_people {
  width: 94%;
  margin: 0 3%;
  padding: 15px 0;
}
.c_people ul li {
  line-height: 22px;
  font-size: 14px;
  color: #333;
}
.c_people ul li img {
  width: 12px;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
}
.c_people ul li span {
  color: #999;
}

.kong {
  width: 100%;
  height: 10px;
  background: #f2f2f2;
}

.Case {
  width: 97%;
  margin-left: 3%;
  margin-bottom: 32px;
}
.Case ul li {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px #ededed solid;
  padding-right: 3%;
}
.Case ul li .img1 {
  width: 16px;
  float: left;
  margin-top: 16px;
  margin-right: 10px;
}
.Case ul li span {
  float: right;
  color: #999;
}
.Case ul li span img {
  height: 13px;
  float: right;
  margin-top: 17.5px;
  margin-left: 10px;
}

.service {
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: #666;
  height: 32px;
  line-height: 32px;
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 88;
}
.service font {
  color: #1890ff;
}

.wl_xz {
  width: 94%;
  padding: 15px 3%;
}
.wl_xz img {
  width: 30px;
  float: left;
  margin-right: 10px;
}
.wl_xz h1 {
  font-size: 14px;
  color: #333;
}
.wl_xz h1 span {
  float: right;
  color: #999;
}
.wl_xz h2 {
  font-size: 12px;
  color: #999;
  padding-top: 5px;
}
.wl_xz h2 span {
  font-size: 16px;
  color: #333;
  float: right;
}

/*跟踪*/
.dp_ddgz {
  widows: 94%;
  padding: 15px 3%;
}
.dp_ddgz dl dt {
  font-size: 12px;
  float: left;
  text-align: right;
  color: #1890ff;
}
.dp_ddgz dl dd {
  margin-left: 66px;
  background: url(../../../static/images/liu2.png) no-repeat left top;
  min-height: 55px;
  padding-left: 25px;
  padding-bottom: 10px;
}
.dp_ddgz dl dd h1 {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
}
.dp_ddgz dl dd p {
  margin-top: 2px;
  font-size: 12px;
  color: #999;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  word-wrap: break-word;
}

.dp_ddgz .dp_ddgz_t {
  background: url(../../../static/images/liu1.png) no-repeat left top;
}
.dp_ddgz .dp_ddgz_b {
  background: url(../../../static/images/liu3.png) no-repeat left top;
}

.dp_ddgz .dp_ddgz_t2 {
  background: url(../../../static/images/liu0.png) no-repeat left top;
}
.order_check .ant-checkbox-wrapper {
  float: left;
  height: 21px;
  line-height: 21px;
  margin-left: 20px;
  padding: 5px 0;
}
.order_co .ant-card-small .ant-card-head {
  padding: 4px 0;
}
</style>
